<template>
  <!-- 生命周期 -->
  <div></div>
</template>

<script setup lang="ts">
  import {
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
  } from 'vue'


  onBeforeMount(() => {
    console.log(`组件挂载之前-onBeforeMount`)
  })
  onMounted(() => {
    console.log(`组件挂载之后-onMounted`);
  })
  onBeforeUpdate(() => {
    console.log(`组件更新之前-onBeforeUpdate`);
  })
  onUpdated(() => {
    console.log(`组件更新之后-onUpdated`);
  })
  onBeforeUnmount(() => {
    console.log(`组件卸载之前-onBeforeUnmount`);
  })
  onUnmounted(() => {
    console.log(`组件卸载之后-onUnmounted`);
  })
</script>

<style scoped>

</style>